﻿<!-- Views/Shared/_Header.cshtml -->
<div class="container-fluid bg-white shadow-sm d-flex align-items-center justify-content-between px-4 py-2">
    <!-- 系统名称 + 移动端侧边栏折叠按钮 -->
    <div class="d-flex align-items-center">
        <button class="btn btn-outline-primary d-md-none me-2" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar">
            <i class="bi bi-list"></i> <!-- 需确保引入 Bootstrap Icons -->
        </button>
        <h5 class="m-0 text-primary">仓储管理系统</h5>
    </div>

    <!-- 搜索 + 消息 + 用户下拉 -->
    <div class="d-flex align-items-center">
        <!-- 搜索框（带图标，宽度更合理） -->
        <div class="input-group me-3" style="width: 280px;">
            <span class="input-group-text bg-light">
                <i class="bi bi-search"></i>
            </span>
            <input type="text" class="form-control" placeholder="输入搜索关键词">
        </div>

        <!-- 消息下拉菜单容器 -->
        <div class="dropdown" id="messageDropdown">
            <button class="btn dropdown-toggle d-flex align-items-center"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false">
                <i class="bi bi-bell-fill fs-5 me-1"></i> <!-- 消息图标（需引入 Bootstrap Icons） -->
                消息
                <span class="badge bg-danger ms-1">3</span> <!-- 总未读消息数 -->
            </button>
            <!-- 下拉菜单内容 -->
            <ul class="dropdown-menu dropdown-menu-end shadow p-1" style="min-width: 220px;">
                <!-- 待审核 -->
                <li>
                    <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">
                        待审核
                        <span class="badge bg-warning">2</span>
                    </a>
                </li>
                <!-- 待入库 -->
                <li>
                    <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">
                        待入库
                        <span class="badge bg-info">5</span>
                    </a>
                </li>
                <!-- 待出库 -->
                <li>
                    <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">
                        待出库
                        <span class="badge bg-primary">3</span>
                    </a>
                </li>
                <!-- 到期提醒 -->
                <li>
                    <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">
                        到期提醒
                        <span class="badge bg-success">8</span>
                    </a>
                </li>
                <!-- 低库存 -->
                <li>
                    <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">
                        低库存
                        <span class="badge bg-secondary">10</span>
                    </a>
                </li>
                <!-- 高库存 -->
                <li>
                    <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">
                        高库存
                        <span class="badge bg-dark">4</span>
                    </a>
                </li>
                <!-- 分隔线 + 查看全部 -->
                <li><hr class="dropdown-divider"></li>
                <li>
                    <a class="dropdown-item text-center" href="#">查看全部消息</a>
                </li>
            </ul>
        </div>

        <!-- 用户信息下拉（图标+紧凑排版） -->
        <div class="dropdown">
            <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" style="background-color: #f1f3f5;">
                <img src="~/images/avatar.png" alt="admin" class="rounded-circle me-2" style="width: 32px; height: 32px;">
                <span class="d-none d-md-inline">admin</span> <!-- 小屏幕隐藏文字，只留头像 -->
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow">
                <li><a class="dropdown-item" href="#"><i class="bi bi-info-circle me-2"></i>项目介绍</a></li>
                <li><a class="dropdown-item" href="#"><i class="bi bi-house-door me-2"></i>作品首页</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-box-arrow-right me-2"></i>退出</a></li>
            </ul>
        </div>
    </div>
</div>